<template>
	<view>
		<u-navbar back-text="返回" title="修改资料"></u-navbar>
		<view style="padding: 32rpx; display: flex; justify-content: center;">
			<u-upload :custom-btn="true" ref="uUpload" :action="uploadUrl" :header="{token:token}"
				:show-upload-list="false" @on-success="onUploadSuccess">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<u-image width="100%" height="100%" :src="info.avatar_fill" shape="circle">
					</u-image>
				</view>
			</u-upload>
		</view>
		<view style="padding:0rpx 32rpx;">
			<view style="background-color: #FFFFFF; border-radius: 32rpx; padding: 0rpx 32rpx;">
				<u-form :model="form" ref="uForm" label-width="150">
					<u-form-item label="昵称" prop="nickname">
						<u-input v-model="form.nickname" />
					</u-form-item>
					<u-form-item label="性别" prop="gender">
						<u-radio-group v-model="form.gender">
							<u-radio name="1">
								男
							</u-radio>
							<u-radio name="0">
								女
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="手机" prop="mobile">
						<u-input v-model="form.mobile" />
					</u-form-item>
					<u-form-item label="生日" prop="birthday">
						<u-input v-model="form.birthday"
							@click="uPickerShow = true;uPickerMode='time',uPickerDefaultTime=form.birthday" />
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view style="padding: 32rpx;">
			<u-button shape="circle" :ripple="true" type="success" :custom-style="{padding:'46rpx'}" @click="onSubmit">
				确定</u-button>
		</view>


		<u-picker :mode="uPickerMode" v-model="uPickerShow" :default-time="uPickerDefaultTime"
			@confirm="onConfirmPicker"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				uploadUrl: this.$unishow + 'api/common/upload', // 演示地址
				postdata: {},
				info: {},
				form: {
					nickname: '',
					gender: '0',
					mobile: '',
					birthday: '',
				},
				rules: {
					nickname: [{
						min: 2,
						message: '昵称不可以少于2个字符',
						trigger: ['blur', 'change']
					}],
					birthday: [{
						request: true,
						message: '请填写生日',
						trigger: ['change']
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				uPickerShow: false,
				uPickerMode: 'time',
				uPickerDefaultTime: '',
			}
		},
		onLoad() {
			var that = this;
			this.checkLogin();
			uni.request({
				url: this.$unishow + 'api/svuser/info',
				method: 'GET',
				data: {},
				header: {
					token: this.token
				},
				success: res => {
					that.info = res.data.info;
					that.form.nickname = res.data.info.nickname;
					that.form.gender = res.data.info.gender;
					that.form.mobile = res.data.info.mobile;
					that.form.birthday = res.data.info.birthday;
					that.form.avatar = res.data.info.avatar;
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async checkLogin() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.token = this.userinfo.token;
				let res = await this.$api.myRequest({
					url: 'api/index/checklogin',
					header: {
						token: this.token
					}
				});
				console.log(res);
				if (res.data.code == 0) {
					await uni.showModal({
						title: '温馨提示',
						content: '你还没，请先登录?',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								// 账户秘密登录
								let url = '/pages/login/login';
								uni.navigateTo({
									url: url
								});
							}
						}
					})
				}
			},
			onUploadSuccess(data, index, lists, name) {
				console.log(data);
				this.info.avatar_fill = data.data.fullurl;
				this.form.avatar = data.data.url;
			},
			onConfirmPicker(e) {
				console.log(e);
				this.form.birthday = e.year + '-' + e.month + '-' + e.day;
			},
			onSubmit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						uni.request({
							url: that.$unishow + 'api/svuser/info?action=save',
							method: 'POST',
							header: {
								token: this.token
							},
							data: {
								row: that.form
							},
							success: res => {
								if(res.data.code == 1){
									this.$refs.uToast.show({
										title: res.data.msg,
										url: '/pages/user/user',
										position:'bottom'
									})
								}else{
									this.$refs.uToast.show({
										title: res.data.msg,
										position:'bottom'
									})
								}
							},
							fail: () => {},
							complete: () => {}
						});
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #eceef4;
	}

	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		margin: auto;
		background: rgb(244, 245, 246);
		border-radius: 80rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>
